<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      *{
         margin: 0;
         padding: 0;
      }
      .bbb{
         width: 100vw;
         height: 10vh;
         border-color: rgb(225, 225,224);
         display: flex;
         align-items: center;
      }
      .bbb>input{
         width: 90vw;
         height: 7vh;
         border-radius:5px;
         margin-left: .8rem;
      }
      .bbb>img{
         width: 7vw;
         position: absolute;
         right: 1.5rem;
      }
      .bbb>span{
         position: absolute;
         right: 3.5rem;
      }
      .ccc{
            width: 100vw;
            height: 10vh;
            background-color: lightblue;
            display: flex;
            border-top: 1px solid rgb(114, 113, 113);
            border-bottom: 1px solid rgb(108, 108, 108);
        }
        .ccc>select{
            border: none;
            flex: 1;
            font-size: 1.3rem;
            font-weight: bold;
            color: rgb(125, 125, 125);
            text-align: right;
            padding: 5px;
        }
        .ddd{
            width: 100vw;
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .d1{
            width: 90vw;
            height: 25vh;
            display: flex;
            align-items: center;
            border-bottom: 2px solid  #ff8a00;
        }
        .d1>div:nth-of-type(1){
            flex: 1;
        }
        .d1>div:nth-of-type(2)>img{
            width: 100%;
        }
        .d1>div:nth-of-type(2){
            flex: 2;
            background-color: aliceblue;
            padding-left: .8rem;
        }
        .d1>div:nth-of-type(2)>p{
            font-weight: bold;
            line-height: 2rem;
            font-size: 1rem;
        }
        .d1>div:nth-of-type(2)>span{
            font-size: .8rem;
            line-height: 1.5rem;
        }
        .d1>div:nth-of-type(2)>span:nth-of-type(3){
            color: #716f6f;
        }
        .d1>div:nth-of-type(2)>span:nth-of-type(4){
            color: #ff8a00;

        }
        .d1>div:nth-of-type(2)>span:nth-of-type(5){
           padding: 2px;
           color:#4f616e ;
        }
        .d1>div:nth-of-type(2)>span:nth-of-type(6){
           color:#4f616e ;
           padding: 2px;
           margin-left: 15px;
        }
        .d1:nth-of-type(3){
            border-bottom: none;
        }
   </style>
</head>
<body>
   <div class="aaa">
      <div class="bbb">
         <input type="text" placeholder="请输入小区或名称">
         <span>|</span>
         <img src="./imges/search_03.png" alt="">
      </div>
      <div class="ccc">
         <select name="" id="">
            <option value="区域">区域</option>
        </select>
        <select name="" id="">
            <option value="区域">价格</option>
        </select>
        <select name="" id="">
            <option value="区域">房型</option>
        </select>
        <select name="" id="">
            <option value="区域">更多</option>
        </select>
      </div>
      <div class="ddd">
         <div class="d1">
            <div>
               <img src="./imges/img1.png" alt="">
            </div>
            <div>
               <p>西便门外大街2室1厅89</p>
               <span>南北&nbsp;&nbsp;</span><span>高楼层/6层</span><br>
               <span>签约价格:13244元/平</span><span>1105万</span><br>
               <span>签约日期:2015年11月10日</span>
           </div>
         </div>
         <div class="d1">
            <div>
                <img src="./imges/img2.png" alt="">
            </div>
            <div>
                <p>金桥国际&nbsp;1室1厅&nbsp;63平</p>
                <span>南北&nbsp;&nbsp;</span><span>高楼层/6层</span><br>
                <span>签约价格:13244元/平</span><span>905万</span><br>
                <span>签约日期:2015年11月10日</span>
            </div>
        </div>
        <div class="d1">
            <div>
                <img src="./imges/img3.png" alt="">
            </div>
            <div>
                <p>花润溪二期&nbsp;2室1厅&nbsp;90</p>
                <span>南北&nbsp;&nbsp;</span><span>高楼层/6层</span><br>
                <span>签约价格:13244元/平</span><span>1322万</span><br>
                <span>签约日期:2015年11月10日</span>
            </div>
        </div>
      </div>
   </div>
</body>
</html>